<template>
  <p-tooltip placement="topLeft" :title="value">
    <span class="content ellipsis" :style="styleObj">
      {{ formatValue }}
    </span>
  </p-tooltip>
</template>

<script>
import { isEmpty } from '@/utils/is';
export default {
  props: {
    value: {
      type: [Number, String],
      default: '',
    },
    width: {
      type: String,
      default: '80px',
    },
    isSame: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    styleObj() {
      return {
        width: this.width,
        color: this.isSame ? 'inherit' : '#f5222d',
      };
    },
    formatValue() {
      if (isEmpty(this.value)) return '-';
      const value = this.value + '';
      if (value.length > 10) {
        return `${value.slice(0, 10)}...`;
      }
      return value;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.content {
  margin-right: auto;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
</style>
